<template>
  <div class="wrapper">
    <div class="header">
      <div class="header-item"><i class="el-icon-s-order"></i>确认订单</div>
    </div>
    <div class="content-box">
      <p style="font-size: 18px">收货地址</p>
      <div class="con-item">
        <div class="con-it">
          <p style="font-size: 18px; color: black">陈同学</p>
          <br />
          <p>13580018623</p>
          <br />
          <p>广东 广州市 白云区 江高镇 <br /><br />广东白云学院</p>
        </div>
        <div class="con-it">
          <p style="font-size: 18px; color: black">陈同学</p>
          <br />
          <p>13580018623</p>
          <br />
          <p>广东 茂名市 化州市 杨梅镇 <br /><br />***</p>
        </div>
        <div class="con-it">
          <i class="el-icon-circle-plus-outline"></i> <br />
          添加新地址
        </div>
      </div>
      <div class="shop">商品优惠券</div>
      <div class="goods" v-for="item in pic" :key="item.id">
        <div class="imgs">
          <img :src="'http://101.132.181.9:3000/' + item.productImg" alt="" />

          {{ item.productName }}
        </div>
        <div class="num">{{ item.price }}×{{ item.num }}</div>
        <div class="price">{{ item.price * item.num }}元</div>
      </div>
      <div class="pei">
        配送方式
        <p>包邮</p>
      </div>
      <div class="pei">
        发票
        <p><span>个人</span> <span> 商品</span> <span>明细</span></p>
      </div>
      <div class="lii">
        <ul>
          <li>
            <span>商品件数: </span>
            <span>{{ checkNumS.allNum }}件</span>
          </li>
          <li>
            <span>商品总价:</span>
            <span>{{ checkNumS.AllPrice }}元</span>
          </li>
          <li>
            <span>活动优惠：</span>
            <span>-0元</span>
          </li>
          <li>
            <span>优惠券抵扣：</span>
            <span>-0元</span>
          </li>
          <li>
            <span>运费:</span>
            <span>0元</span>
          </li>
          <li>
            <span>应付总额:</span>
            <span>
              <i style="font-size: 25px">{{ checkNumS.AllPrice }}</i> 元</span
            >
          </li>
        </ul>
      </div>
      <div class="button">
        <button @click="$router.go(-1)">返回购物车</button>
        <button @click="confirmShop">结算</button>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrder } from "../api/api";
export default {
  name: "confirmOrder",
  data() {
    return {
      pic: this.$store.state.pic,
    };
  },
  computed: {
    //总价
    checkNumS() {
      var allNum = 0;
      var AllPrice = 0;
      this.pic.forEach((item) => {
        allNum += item.num;
        AllPrice += item.num * item.price;
      });
      return { allNum, AllPrice };
    },
  },
  created() {},
  methods: {
    async confirmShop() {//点击结算跳转到订单
      const res = await addOrder({
        products: this.pic,
        user_id: this.$store.getters.getUser.user_id,
      });
      console.log(res, "111");
      if (res.code == "001") {
        this.$message.success('购买成功')
        this.$router.push("/order");
       
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    height: 64px;
    width: 100%;
    padding: 20px 0 0 0;
    background: white;
    border-bottom: 3px solid rgb(255, 103, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    .header-item {
      i {
        font-size: 50px;
        color: rgb(255, 103, 0);
        margin-right: 10px;
      }
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px;
    }
  }
  .content-box {
    width: 1225px;
    height: 100%;
    background: white;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    .con-item {
      width: 100%;
      height: 100%;
      display: flex;
      font-size: 14px;
      margin-top: 20px;
      .con-it:nth-child(1) {
        border: 1px solid rgb(255, 103, 0);
      }
      .con-it:nth-child(3) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        i {
          font-size: 30px;
        }
      }

      .con-it {
        color: #757575;
        width: 220px;
        height: 178px;
        border: 1px solid #e0e0e0;
        padding: 15px 24px 0;
        margin-right: 17px;
        margin-bottom: 24px;
      }
    }
    .shop {
      height: 40px;
      color: #333;
      font-size: 18px;
      line-height: 40px;
      border-bottom: 1px solid #e0e0e0;
    }
    .goods {
      height: 52px;
      padding: 5px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      font-size: 16px !important;
      .imgs {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 30px;
          width: 30px;
        }
      }
      .num {
        margin-left: 500px;
      }
      .price {
        margin-left: 300px;
        color: rgb(255, 103, 0);
      }
    }
    .pei {
      height: 89px;
      color: #333;
      font-size: 18px;
      line-height: 89px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      p {
        font-size: 16px;
        color: rgb(255, 103, 0);
        margin-left: 100px;
        span:nth-child(1) {
          margin-left: 33px;
        }
        span {
          margin-right: 20px;
        }
      }
    }
    .lii {
      margin: 0 48px;
      padding: 20px 0;
      border-bottom: 1px solid #e0e0e0;
      overflow: hidden;
      ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        margin-left: 895px;
        li {
            display: flex;
            width: 230px;
          span:nth-child(1) {
            float: left;
            // width: 135px;
            height: 30px;
            display: block;
            line-height: 30px;
            color: #757575;
          }
          span:nth-child(2) {
            float: left;
            // min-width: 105px;
            width: 130px;
            height: 30px;
            display: block;
            line-height: 30px;
            color: #ff6700;
          }
        }
      }
    }
    .button {
      padding: 20px 48px;
      margin-left: 700px;
      display: flex;
      button:nth-child(1) {
        float: left;
        margin-left: 30px;
        width: 158px;
        height: 38px;
        border: 1px solid #b0b0b0;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
      }
      button:nth-child(2) {
        float: left;
        margin-left: 30px;
        width: 158px;
        height: 38px;
        color: white;
        background: #ff6700;
        border: none;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
      }
    }
  }
}
</style>